<template>
  <div class="roles">
    <div class="roles_header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="roles_list_box">
      <div class="roles_list_box_box">
        <div class="roles_list_box_search">
          <el-button type="primary" class="add_roles" @click="addroles"
            >添加角色</el-button
          >
        </div>
        <!-- 添加角色 -->
        <el-dialog title="添加角色" :visible.sync="casedialog" width="30%">
          <div>
            <el-form
              label-position="left"
              status-icon
              :rules="rules"
              ref="formroles"
              label-width="80px"
              :model="formroles"
              class="demo-ruleForm"
            >
              <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="formroles.roleName"></el-input>
              </el-form-item>
              <el-form-item label="角色描述" prop="roleDesc">
                <el-input v-model="formroles.roleDesc"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="outcase">取 消</el-button>
            <el-button type="primary" @click="submitcase('formroles')"
              >确 定</el-button
            >
          </span>
        </el-dialog>

        <div class="roles_list_box_body">
          <el-table :data="rolesdata" style="width: 100%" border>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <div
                    class="roles_one"
                    v-for="item in props.row.children"
                    :key="item.id"
                  >
                    <div class="one_box">
                      <el-tag
                        closable
                        @close="handleClose(item.id, props.row.id)"
                        ><span>{{ item.authName }}</span></el-tag
                      >
                      <span class="el-icon-caret-right"></span>
                    </div>
                    <div class="giao">
                      <div
                        class="roles_two"
                        v-for="items in item.children"
                        :key="items.id"
                      >
                        <div class="two_box">
                          <el-tag
                            type="success"
                            closable
                            @close="handleClose(items.id, props.row.id)"
                            ><span>{{ items.authName }}</span></el-tag
                          >
                          <span class="el-icon-caret-right"></span>
                        </div>

                        <div class="roles_three">
                          <div
                            class="three_box"
                            v-for="itemss in items.children"
                            :key="itemss.id"
                          >
                            <el-tag
                              type="warning"
                              closable
                              @close="handleClose(itemss.id, props.row.id)"
                              >{{ itemss.authName }}</el-tag
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-form>
              </template>
            </el-table-column>

            <el-table-column label="#" prop="index" width="48">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>

            <el-table-column label="角色名称" prop="roleName">
            </el-table-column>

            <el-table-column label="角色描述" prop="roleDesc">
            </el-table-column>

            <el-table-column label="操作" prop="desc">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  @click="editroles(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  @click="open(scope.row)"
                  >删除</el-button
                >
                <el-button
                  type="warning"
                  icon="el-icon-setting"
                  @click="openPower(scope.row)"
                  >分配权限</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 修改角色 -->
        <el-dialog title="修改角色" :visible.sync="dialogFormroles">
          <el-form
            label-position="left"
            label-width="80px"
            :rules="rules"
            :model="form"
            ref="form"
          >
            <el-form-item label="角色名称">
              <el-input v-model="form.roleName"></el-input>
            </el-form-item>
            <el-form-item label="角色描述" prop="roleDesc">
              <el-input v-model="form.roleDesc"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormroles = false">取 消</el-button>
            <el-button type="primary" @click="sureaddroles('form')"
              >确 定</el-button
            >
          </div>
        </el-dialog>

        <!-- 分配权限 -->
        <el-dialog title="分配权限" :visible.sync="dialogTablePower">
          <el-tree
            default-expand-all
            :data="powerData"
            show-checkbox
            node-key="id"
            ref="tree"
            :default-checked-keys="defaultcheckedkeysarr"
            :props="defaultProps"
          >
          </el-tree>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogTablePower = false">取 消</el-button>
            <el-button type="primary" @click="surepower">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { getRoles } from "@/api/http.js";
import {
  setRoles,
  seteditRoles,
  deleteRoles,
  getPowerlist,
  setPoweruser,
  deletePoweruser,
} from "@/api/power.js";
export default {
  data() {
    var formrolesroleName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("角色名称不能为空"));
      } else {
        let rag = /([u4e00-u9fa5\dA-Za-z]){2,8}/;
        if (!rag.test(value)) {
          return callback(new Error("角色名称长度在2~8个字符之间"));
        } else {
          callback();
        }
      }
    };
    var formrolesroleDesc = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("角色描述不能为空"));
      } else {
        callback();
      }
    };

    return {
      rolesdata: [], //  角色 数据
      casedialog: false, // 是否 开启 添加 角色 弹框
      dialogFormroles: false, //  是否开启 修改 弹框
      dialogTablePower: false, //是否开启分配权限框
      powerData: [], //权限列表
      defaultProps: {
        //权限列表配置
        children: "children",
        label: "authName",
        roleId: "",
        path: "path",
        rids: "",
      },
      defaultcheckedkeysarr: [], //选中的

      formroles: {
        // 添加角色 的 表单
        roleName: "",
        roleDesc: "",
      },
      rules: {
        roleName: [{ validator: formrolesroleName, trigger: "blur" }],
        roleDesc: [{ validator: formrolesroleDesc, trigger: "blur" }],
      },
      // 修改编辑
      form: {
        id: "",
        roleName: "",
        roleDesc: "",
      },
    };
  },
  mounted() {
    // 请求 角色 数据
    this.getrolesdata();
  },
  methods: {
    // 请求 角色 数据
    getrolesdata() {
      getRoles().then((res) => {
        this.rolesdata = res.data;
        console.log(res.data);
      });
    },
    // 开启 添加 角色 弹框
    addroles() {
      this.casedialog = true;
      this.formroles = {
        roleName: "",
        roleDesc: "",
      };
    },
    // 提交 添加 角色
    submitcase(formroles) {
      console.log(this.formroles);
      this.casedialog = false;
      this.$refs[formroles].validate((valid) => {
        if (valid) {
          // console.log(valid);
          this.setRolesdata();
          // alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //提交 添加 角色接口
    setRolesdata() {
      let parems = {
        roleName: this.formroles.roleName,
        roleDesc: this.formroles.roleDesc,
      };
      setRoles(parems).then((res) => {
        this.getrolesdata();
      });
    },
    // 取消重置
    outcase(formroles) {
      this.casedialog = false;
      this.$refs[formroles].resetFields();
    },
    //编辑 修改
    editroles(scope) {
      this.dialogFormroles = true;
      this.form = {
        id: scope.id,
        roleName: scope.roleName,
        roleDesc: scope.roleDesc,
      };
      console.log(226, this.form);
    },
    // 确认提交修改
    sureaddroles(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          let parems = {
            id: this.form.id,
            roleName: this.form.roleName,
            roleDesc: this.form.roleDesc,
          };
          console.log(parems);
          // 提交确认修改 的 接口
          seteditRoles(parems).then((res) => {
            console.log(240, res);
            this.$message({
              showClose: true,
              message: res.meta.msg,
              type: "success",
            });

            this.dialogFormroles = false;
            this.getrolesdata();
          });
          // alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 删除单个用户 数据
    open(scope) {
      let id = scope.id;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteRolesdata(id);
          // console.log(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 提交删除接口
    deleteRolesdata(cid) {
      deleteRoles({
        id: cid,
      })
        .then((res) => {
          this.getrolesdata();
          // console.log(287, res);
          this.$message({
            type: "success",
            message: res.meta.msg,
          });
        })
        .catch((err) => {});
    },
    //分配权限
    openPower(scope) {
      this.defaultProps.roleId = scope.id;
      // 只收集 孙子 的 id
      function fn(scope, arr) {
        if (!scope.children) {
          return arr.push(scope.id);
        }
        scope.children.forEach((item) => {
          fn(item, arr);
        });
      }

      fn(scope, this.defaultcheckedkeysarr);

      this.dialogTablePower = true;
      //// 获取权限列表接口
      getPowerlist().then((res) => {
        this.powerData = res.data;
      });
    },

    // 点击确定 设置 权限
    surepower() {
      let ridsarr = [
        ...this.$refs.tree.getHalfCheckedKeys(),
        ...this.$refs.tree.getCheckedKeys(),
      ];

      let ridstr = ridsarr.join(",");
      this.dialogTablePower = false;
      let parems = {
        roleId: this.defaultProps.roleId,
        rids: ridstr,
      };
      // 点击确定 设置 权限 接口
      setPoweruser(parems).then((res) => {
        console.log(res);
        this.getrolesdata();
        this.$message({
          type: "success",
          message: res.meta.msg,
        });
      });
    },
    // 点击删除单个 权限 标签
    handleClose(rightId, roleId) {
      deletePoweruser({
        rightId: rightId,
        roleId: roleId,
      }).then((res) => {
        console.log(res);
        this.getrolesdata();
        this.$message({
          type: "success",
          message: res.meta.msg,
        });
      });
      // console.log(rightId,roleId);
    },
  },
  components: {},
};
</script>

<style lang='scss' scoped>
.roles {
  width: 100%;
  height: 100%;
  background: #eee;
  .roles_header {
    width: 100%;
    height: 80px;
    padding-top: 30px;
    padding-left: 30px;
  }
  .roles_list_box {
    width: 100%;
    height: calc(100% - 80px);
    .roles_list_box_box {
      width: 95%;
      height: 100%;
      background: #fff;
      margin: 0 auto;
      .roles_list_box_search {
        width: 95%;
        height: 80px;
        margin: 0 auto;
        line-height: 80px;
      }
      .roles_list_box_body {
        width: 95%;
        height: calc(100% - 80px);
        margin: 0 auto;
        .roles_one {
          width: 100%;
          padding: 0 30px;
          display: flex;
          align-items: center;
          border: 1px solid #eee;
          border-bottom: none;

          .giao {
            width: 1000px;
            align-items: center;
            border-left: 1px solid #eee;
            .roles_two {
              display: flex;
              padding: 10px;
              align-items: center;
              border: 1px solid #eee;
              border-bottom: none;
              .two_box {
                width: 200px;
                padding: 0 10px;
              }
              .roles_three {
                //  width: ;
                display: flex;
                flex-wrap: wrap;
                .three_box {
                  padding: 10px;
                }
              }
            }
          }
          .one_box {
            width: 200px;
          }
        }
      }
    }
  }
}
</style>
